<template>
     <section id="app">
        <div v-if='!noService'>
            <el-input
                size='small' 
                placeholder="请输入查询商家"
                prefix-icon="el-icon-search"
                v-model='searchSeller'
            >
            </el-input>
        </div>
        <!-- 占位HTML -->
        <div v-if='zhanweiOff' style='height:240px;margin:150px auto;'>
          <img src="../../../static/img/no-data.png" height="100%" width="100%">
        </div>
        <!-- 该地区不支持服务 -->
        <div v-if='noService' style='margin:80px auto;text-align:center;'>
           <p style='height:50px;line-height:50px;font-size:15px;'>该地区暂未开通服务</p>
           <p style='font-size:13px;color:#999;'>更多内容，敬请期待...</p>
        </div>
        <section id="mdlist">
            <div>
                <div  
                    v-for='(val,index) in sellerList'
                    @click='getShdetail(val.num)'
                    :key='index'
                    class="content" 
                >
                    <el-row style='height:70px;'>
                        <el-col :span='7'>
                            <img style="border-radius: 5px;" :src='val.infoImgJson' width="90" height="70">
                        </el-col>
                        <el-col :span='17' class='seller-order-address'>
                            <h4 style="font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{val.fullName}}</h4>
                            <el-row style='padding:20px 0 0 0;'>
                                <el-col :span='18'>
                                    订单:{{val.orderNum}}
                                </el-col>
                                <el-col :span='6'>
                                    <span v-if='val.distance'>{{val.distance}}km</span>
                                </el-col>
                            </el-row>
                            <!-- <p style='padding:4px 0 0 0;'>订单:{{val.orderNum}}<span v-if='val.distance'>{{val.distance}}km</span></p> -->
                            <p >{{val.address}}</p> 
                        </el-col>
                    </el-row> 
                </div>
            </div>
            
        </section>
    </section>
</template>

<script>
import { URL_GET_SELLER, AJAX, _layer } from "@/comm.js";
import { dropload } from "@/dropload.js";
export default {
    data() {
        return {
            noService: false, //改地区暂无服务
            score: null,
            zhanweiOff: false,
            searchSeller: "",
            selectedOptions: [],
            sellerList: [],
            startGet: true,
            pageNum: 1,
            longitude: "",
            latitude: "",
            pageSize: 15,
            serchName: ""
        };
    },
    watch: {
        searchSeller(newval, oldval) {
            let send = {
                pageNum: 1, //从哪开始取数据
                pageSize: 15, //取多少条数据
                name: newval,
                longitude: "",
                latitude: ""
            };
            if (!newval) {
                send.longitude = this.longitude;
                send.latitude = this.latitude;
            }
            //开启滚动
            this.serchName = newval;
            this.pageNum = 1;
            this.getData(send, "search");
        }
    },
    created() {
        $("title").text("商家列表");
        //得到经纬度授权
        this.getLat();
    },
    // mounted() {
    //     let This = this;
    //     setTimeout(function() {
    //         dropload($("#mdlist"), {
    //             scrollArea: window,
    //             loadDownFn: function(me) {
    //                 let send = {
    //                     pageNum: This.pageNum + 1, //从哪页取数据
    //                     pageSize: This.pageSize, //取多少条数据
    //                     name: This.serchName,
    //                     longitude: This.longitude,
    //                     latitude: This.latitude
    //                 };
    //                 This.getData(send, "scroll", me);
    //             }
    //         });
    //     }, 800);
    // },
    methods: {
        getShdetail(num) {
            this.$router.push({
                path: "/mdlist.html/shdetail",
                query: { num: num }
            });
        },
        getData(send, type, me) {
            let This = this;
            $.ajax({
                url: URL_GET_SELLER,
                type: "post",
                data: JSON.stringify(send),
                dataType: "json",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json"
                },
                cache: false,
                processData: false,
                success: function(data) {
                    if (!data.retult && String(data.code) == "10000") {
                        //该地区暂无支持
                        This.noService = true;
                        $("title").text("系统提示");
                        $('body').css('background','white');
                        setTimeout(function(){
                            $('.dropload-down').hide();
                        },600);
                        return;
                    }
                    switch (type) {
                        case "created":
                            //执行created的数据处理
                            This.creHandle(data);
                            break;
                        case "search":
                            //执行模糊搜索进行的处理
                            This.seaHandle(data);
                            break;
                        case "scroll":
                            //执行滚动条的数据处理
                            This.scrHandle(data, me);
                            break;
                    }
                },
                error: function() {
                    me.resetload();
                }
            });
        },
        //执行created的数据处理
        creHandle(data) {
            if (data.retult) {
                if (data.data.length <= 0) {
                    _layer("商家没有数据咯");
                    this.zhanweiOff = true;
                } else {
                    this.sellerList = data.data;
                    this.zhanweiOff = false;
                }
            } else {
                _layer("服务器开小差咯");
            }
        },
        //执行模糊搜索进行的处理
        seaHandle(data) {
            if (data.retult) {
                this.sellerList = [];
                this.sellerList = data.data.filter(function(val, index) {
                    for (let i = 0; i < data.data.length; i++) {
                        if (
                            val.fullName == data.data[i].fullName &&
                            val.id == data.data[i].id &&
                            i != index
                        ) {
                            return false;
                        }
                    }
                    return true;
                });
            } else {
                _layer("服务器开小差咯");
            }
        },
        //执行滚动条的数据处理
        scrHandle(data, me) {
            if (data.retult) {
                if (data.data.length != 15) {
                    //关闭滚动
                    // this.offScroll=false;

                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                }
                for (let i = 0; i < data.data.length; i++) {
                    this.sellerList.push(data.data[i]);
                }
                me.resetload();
                this.pageNum = this.pageNum + 1;
                this.startGet = true;
            } else {
                // this.offScroll=true;
                _layer("服务器开小差咯");
            }
        },
        //与后天交互经纬度来排序
        getLat() {
            let send = {
                pageNum: this.pageNum, //从哪页取数据
                pageSize: this.pageSize, //取多少条数据
                name: "",
                latitude: "",
                longitude: ""
            };
            let This = this;
            $.ajax({
                type: "get", //提交方式
                url: "/wx/jsapi", //路径
                data: { url: window.location.href },
                success: function(result) {
                    //返回数据根据结果进行相应的处理
                    if (result.retult) {
                        wx.config({
                            appId: result.data.appId,
                            nonceStr: result.data.nonceStr,
                            signature: result.data.signature,
                            timestamp: result.data.timestamp,
                            jsApiList: ["getLocation", "openLocation"]
                        });
                        wx.ready(function() {
                            //配置成功调用微信接口
                            wx.getLocation({
                                type: "wgs84",
                                success: function(res) {
                                    var latitude = res.latitude;
                                    var longitude = res.longitude;
                                    let send = {
                                        pageNum: This.pageNum, //从哪页取数据
                                        pageSize: This.pageSize, //取多少条数据
                                        name: "",
                                        longitude: longitude,
                                        latitude: latitude
                                    };
                                    This.longitude = longitude;
                                    This.latitude = latitude;
                                    This.getData(send, "created");
                                },
                                fail: function() {
                                    _layer("附近商家获取失败3");
                                    This.getData(send, "created");
                                }
                            });
                        });
                        wx.error(function(res) {
                            //配置失败，调用默认接口
                            _layer("附近商家获取失败2");
                            This.getData(send, "created");
                        });
                    } else {
                        _layer("附近商家获取失败1");
                        This.getData(send, "created");
                    }

                    //做分页
                    setTimeout(function() {
                        dropload($("#mdlist"), {
                            scrollArea: window,
                            loadDownFn: function(me) {
                                let send = {
                                    pageNum: This.pageNum + 1, //从哪页取数据
                                    pageSize: This.pageSize, //取多少条数据
                                    name: This.serchName,
                                    longitude: This.longitude,
                                    latitude: This.latitude
                                };
                                This.getData(send, "scroll", me);
                            }
                        });
                    }, 1200);


                }
            });
        }
    }
};
</script>

<style scoped>
.content {
    height: 70px;
    padding: 18px 7px 18px 15px;
    background-color: white;
    margin-bottom: 3px;
}
.content .el-input input {
    border: 0px;
    outline: 0px;
}
.seller-order-address p {
    height: 20px;
    font-size: 14px;
    color: #303133d4;
}
.seller-order-address p:first-of-type {
    line-height: 27px;
}
.seller-order-address p:last-of-type {
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>